<template>
  <!-- <div style="align-content: center;">
  <a-descriptions size="default">
    <a-descriptions-item label="姓名">{{ formData.userName }}</a-descriptions-item>
    <a-descriptions-item label="试卷总分">{{ formData.examTitle }}</a-descriptions-item>
    <a-descriptions-item label="考试得分">{{ formData.userScore }}</a-descriptions-item>
  </a-descriptions>
</div> -->
  <div>
    <Descriptions bordered size="default">
      <Descriptions.Item colonMarginRight="4" label="姓名">{{ formData.userName }}</Descriptions.Item>
      <Descriptions.Item label="试卷总分">{{ formData.examScore }}</Descriptions.Item>
      <Descriptions.Item label="考试得分">{{ formData.userScore }}</Descriptions.Item>
    </Descriptions>
    <br />
  </div>
  <div v-for="question in allIQutem" style="height: 100%;">
    <a-card v-if="question.questionType == '单选题' || question.questionType == '判断题'" :title="question.content"
      style="width: 100%;height: 40%;position: absolute;">
      <a-radio-group v-model:value="question.answer">
        <a-radio v-for="aitem in question.answerList"
          style="display:block;height:30px;line-height:30px;font-size: 15px;" :value="aitem.id">
          {{ aitem.content }}
        </a-radio>
      </a-radio-group>
    </a-card>
  
    <a-card v-if="question.questionType == '多选题'" :title="question.content" style="width: 100%;height: 40%;position: absolute;">
      <a-checkbox-group v-model:value="question.answer">
        <a-checkbox v-for="aitem in question.answerList"
          style="display: flex;height:30px;lineHeight:30px;font-size: 15px;" :value="aitem.id">
          {{ aitem.content }}
        </a-checkbox>
      </a-checkbox-group>
    </a-card>
  </div>
</template>


<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick} from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { getValueType } from '/@/utils';
import { saveOrUpdate, queryPaper } from '../LabExamPaper.api';
import { Form, Descriptions } from 'ant-design-vue';


const allIQutem = ref([]);
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  userId: '',
  userName: '',
  departId: '',
  departName: '',
  examId: '',
  examTitle: '',
  examTime: undefined,
  userTime: undefined,
  examScore: undefined,
  passScore: undefined,
  userScore: undefined,
  state: '',
  limitTime: '',
  LabExamPaperPage: [],
});

function reset() {
  formData.id = null;
  formData.userId = '';
  formData.userName = '';
  formData.departId = '';
  formData.departName = '';
  formData.examId = '';
  formData.examTitle = '';
  formData.examTime = '';
  formData.userTime = '';
  formData.examScore = '';
  formData.passScore = '';
  formData.userScore = '';
  formData.state = '';
  formData.limitTime = '';
  formData.LabExamPaperPage = [];
}
const { createMessage } = useMessage();
const confirmLoading = ref<boolean>(false);


const { resetFields, validate } = useForm(formData, { immediate: true, });

/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
function edit(record) {
  nextTick(async () => {
    reset();
    resetFields();
    //赋值
    Object.assign(formData, record);
    formData.allIQutem = [];
    formData.LabExamPaperPage = await queryPaper({ paperId: record.id });
    formData.LabExamPaperPage.radioList.forEach(item => {
      // console.log(item);
      allIQutem.value.push(item);
    })
    formData.LabExamPaperPage.multiList.forEach(item => {
      allIQutem.value.push(item);
    })
    formData.LabExamPaperPage.judgeList.forEach(item => {
      allIQutem.value.push(item);
    })
  });
  console.log(allIQutem);
}

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (model.id) {
    isUpdate.value = true;
  }
  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }
  await saveOrUpdate(model, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}


defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}
</style>
